<template>
  <div class="login-view">
    <div class="login-container">
      <div class="login-title">
        <span class="title">
          {{ loginInfo.title }}
        </span>
      </div>

      <common-login v-if="authStore.loginType === 'common'"
                    class="animate__animated animate__bounceIn"/>
      <phone-login v-if="authStore.loginType === 'phone'"
                   class="animate__animated animate__bounceIn"/>
      <email-login v-if="authStore.loginType === 'email'"
                   class="animate__animated animate__bounceIn"/>
    </div>
  </div>
</template>

<script setup lang="ts">
import CommonLogin from '@/components/Login/CommonLogin.vue'
import PhoneLogin from '@/components/Login/PhoneLogin.vue'
import EmailLogin from '@/components/Login/EmailLogin.vue'
import { useAuthStore } from '@/store/auth'
import { onMounted, onUnmounted, reactive } from 'vue'

const authStore = useAuthStore()

const loginInfo = reactive({
  title: 'Sweet Hut'
})

onMounted(() => {
  authStore.isVerified = false
  // authStore.resetLoginForm()
})

onUnmounted(() => {
  authStore.stopCountdown()
})
</script>

<style lang="scss">
$form-item-width: 300px;
$login-height: 500px;

.login-view {
  height: 100%;
  display: grid;
  place-items: center;

  .login-container {
    // height: $login-height;
    padding: 30px;
    border-radius: 15px;
    box-shadow: 2px 2px 5px #D3D3D3, 4px 4px 10px #A9A9A9;

    display: flex;
    flex-direction: column;
    // justify-content: center;
    align-items: center;
    gap: 1vh;

    .login-title {
      margin-bottom: 20px;
      .title {
        font-size: 1.5rem;
      }
    }

    .common-login {
      flex-grow: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;
      gap: 1vh;

      .login-form {
        .el-form-item {
          width: $form-item-width;
        }

        .login-option {
          .el-form-item__content {
            justify-content: space-between;
          }
        }
      }

      .login-type {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
      }

      .login-others-type {
        margin-top: 5vh;
        width: 100%;

        .el-divider {
          .el-divider__text {
            color: #A9A9A9;
            font-size: 0.8rem;
          }
        }

        .type-list {
          display: flex;
          justify-content: space-evenly;

          i {
            font-size: 1.2rem;
          }

          i:hover {
            cursor: pointer;
            filter: brightness(1.5);
          }
        }
      }

      .login-register {
        margin-top: 10px;
        display: flex;
        justify-content: center;
        span {
          font-size: 0.9rem;
        }
      }
    }

    .phone-login, .email-login {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: 1vh;

      .login-form {
        .el-form-item {
          width: $form-item-width;
        }

        .code-item {
          .el-form-item__content {
            flex-wrap: nowrap;
            gap: 10px;
          }
        }
      }
    }
  }
}
</style>
